<div class="p-h-md p-v bg-white box-shadow pos-rlt">
  <h3 class="no-margin">Smart tables</h3>
</div>
<div class="p-md">
  <div class="panel panel-default">
    <div class="panel-heading">pipe/ajax plugin</div>

    <div class="panel-body">
      <button type="button" ng-click="addRandomItem(row)" class="btn btn-sm btn-success">
        <i class="glyphicon glyphicon-plus">
        </i> Add
      </button>
    </div>
    <table st-table="rowCollectionPip"  st-pipe="callServer" class="table table-striped">
      <thead>
      <tr>
        <th>NAME</th>
        <th>TYPE</th>
        <th>URL</th>
        <th>PARENT</th>
        <th>OPERATE</th>
      </tr>
      <tr>
        <th>
          <input st-search="firstName" placeholder="search for firstname" class="input-sm form-control" type="search"/>
        </th>
        <th colspan="4">
          <input st-search placeholder="global search" class="input-sm form-control" type="search"/>
        </th>
      </tr>
      </thead>
      <tbody ng-hide="isLoading">
        <tr ng-repeat="row in rowCollectionPip">
          <td>{{row.name}}</td>
          <td>{{row.type}}</td>
          <td>{{row.url}}</td>
          <td>{{row.parentId}}</td>
          <td>
            <button type="button" ng-click="removeRow({{row.id}})" class="btn btn-xs btn-default">
              <i class="fa fa-times">
              </i>
            </button>
          </td>
        </tr>
      </tbody>
      <tbody ng-show="isLoading">
          <tr>
            <td colspan="5" class="text-center"><i class="fa fa-spin fa-refresh"></i></td>
          </tr>
      </tbody>
      <tfoot>
      <tr>
        <td colspan="5" class="text-center">
          <div st-pagination=""  st-items-by-page="itemsByPage" st-displayed-pages="totalPages" class="no-margin"></div>
        </td>
      </tr>
      </tfoot>
    </table>
  </div>

</div>